<template>
  <div>
     <h1>爷爷组件</h1>
     <h1>页面中使用state的数据：{{$store.state.count}}</h1>
     <button @click="toChange">改变vuex的count数据</button>
     <button @click="actChange">用actions改变数据</button>
     <h1>将vuex的数据放到本组件的计算属性：{{count}}</h1>
    <h1>将vuex的数据放到本组件的计算属性：{{countTen}}</h1>
     <hr>
     <vuex-one></vuex-one>
     
  </div>
</template>

<script>
import vuexOne from './vuexOne'
export default {
  name: '2209vueIndex',
  components:{
    vuexOne
  },
  data() {
    return {
      ydata:"今天星期三",
      tdata:"天津工业大学"
    };
  },
  // provide 和inject 是完成 祖先组件与后代组件之间的传值
  provide(){ //向后代组件
    return {
      ydata:this.ydata,
      tkdata:this.tdata
    }
  },
  mounted() {
    // vuex 数据在js中使用
      console.log(this.$store.state.count)
      console.log(this.$store.getters.count)
  },
  computed:{ //计算属性来计算 或使用vuex的数据
    count(){
      return this.$store.state.count
    },
    countTen(){
      return this.$store.getters.count*10
    }
  },
  methods: {
    toChange(){
      // 触发mutations的方法 去修改state
      this.$store.commit("setCount",5)
    },
    actChange(){
      // 使用actions的方法改变 vuexd的state
      this.$store.dispatch("countAct",20)
    }
  },
};
</script>